import {Input} from "antd";
import style from "@/styles/components/input.module.scss"
import {type ChangeEvent, type ReactNode, useCallback} from "react";

type InputPropsType = {
    before: ReactNode
    value?: string
    onChange?: (e: string) => void
}

export const LoginInput = (props: InputPropsType) => {
    const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
        if (props.onChange) {
            props.onChange(e.target.value)
        }
    }, [props.value])

    return(
        <Input
            addonBefore={props.before}
            value={props.value}
            className={style.loginInput}
            onChange={onChange}
        />
    )
}